<template>
  <view class="page">
    <image
      class="bg"
      :src="imgBaseUrlV0 + 'equipment-type.png'"
      mode="widthFix"
    ></image>
    <view class="main">
      <view class="title-view">
        <text class="ch">设备分类</text>
        <text class="en">Equipment Classification</text>
      </view>
      <view class="management-view">
        <text class="hint"
          >系统允许最多自定义3个大类，每个类别层级深度为2级</text
        >
        <text class="btn" @click="onShowManage">{{
          managementType ? "完成" : "管理"
        }}</text>
      </view>

      <view
        class="type-group"
        v-for="(type, typeIndex) in dataList"
        :key="typeIndex"
      >
        <view class="type-title-view">
          <image
            class="title-bg"
            :src="imgBaseUrlV0 + 'equipment-type-title1.png'"
            mode="widthFix"
          ></image>
          <view class="group-main">
            <!-- <u-icon
              class="icon"
              :name="imgBaseUrlV0 + 'equipment-type-icon.png'"
              size="40"
            ></u-icon> -->
            <text class="type-name">{{ type.name }}</text>
            <view
              class="add-sub-type"
              v-if="!managementType"
              @click="onAddTypeShow(type)"
            >
              <!-- <u-icon
                class="add-sub-type-icon"
                name="plus"
                size="30"
                color="#fff"
              ></u-icon> -->
              <text class="add-sub-type-title">添加子分类</text>
            </view>
            <view
              v-if="managementType"
              class="delete-type"
              @click="onModifyTypeShow(type)"
            >
              <!-- <u-icon
                class="delete-icon"
                :name="imgBaseUrlV0 + 'equipment-type-edit-icon2.png'"
                size="26"
              ></u-icon> -->
              <text class="delete-text">编辑</text>
            </view>
            <view
              v-if="managementType"
              class="delete-type"
              @click="onShowDeleteType(type)"
            >
              <u-icon
                class="delete-icon"
                :name="imgBaseUrlV0 + 'delete-icon-white.png'"
                size="26"
              ></u-icon>
              <text class="delete-text">删除</text>
            </view>
          </view>
        </view>
        <view class="types">
          <view
            class="type"
            v-for="(subType, subIndex) in type.children"
            :key="subIndex"
          >
            <u-icon
              class="expand-icon"
              :name="imgBaseUrlV0 + 'equipment-type-sub-icon.png'"
              size="20"
            ></u-icon>
            <text class="sub-type-name">{{ subType.name }}</text>
            <view v-show="managementType" @click="onModifyTypeShow(subType)">
              <u-icon
                class="delete-icon"
                :name="imgBaseUrlV0 + 'equipment-type-edit-icon1.png'"
                size="26"
              ></u-icon>
              <text class="delete-text">编辑</text>
            </view>
            <view v-show="managementType" @click="onShowDeleteType(subType)">
              <u-icon
                class="delete-icon"
                :name="imgBaseUrlV0 + 'equipment-type-delete-icon.png'"
                size="26"
              ></u-icon>
              <text class="delete-text">删除</text>
            </view>
          </view>
        </view>
      </view>
      <button class="add-type-btn" type="primary" @click="onAddTypeShow()">
        添加一级分类
      </button>
    </view>

    <x-modal
      v-model="addTypeViewShow"
      :title="addTypeLevel == 1 ? '添加一级分类' : '添加子分类'"
      @confirm="onAddTypeConfirm"
      :show-cancel-button="true"
    >
      <view class="slot-content">
        <input
          class="add-type-input"
          type="text"
          v-model="equipmentType.name"
          placeholder="请输入分类名称"
        />
      </view>
    </x-modal>
    <x-modal
      v-model="modifyTypeViewShow"
      title="编辑分类"
      @confirm="onModifyTypeConfirm"
      :show-cancel-button="true"
    >
      <view class="slot-content">
        <input
          class="add-type-input"
          type="text"
          v-model="equipmentType.name"
          placeholder="请输入分类名称"
        />
      </view>
    </x-modal>
    <x-modal
      v-model="alertViewShow"
      :content="alertContent"
      :show-cancel-button="true"
      @confirm="onDeleteType"
    ></x-modal>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import xModal from "@/components/public/x-modal/x-modal";

import {
  getEquipmentTypeOptions,
  postEquipmentType,
  putEquipmentType,
  deleteEquipmentType,
} from "@/common/api/equipment-type.js";

import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
export default {
  mixins: [viewModule],
  components: {
    xModal,
  },
  data() {
    return {
      imgBaseUrl,
      imgBaseUrlV0,
      typeList: [
        // {
        //   label: "车间类",
        //   value: 1,
        //   children: [
        //     {
        //       label: "车间类",
        //       value: 2,
        //     },
        //   ],
        // },
      ],
      alertContent: "",
      /* 添加分类 */
      currentType: null,
      addTypeViewShow: false,
      addTypeLevel: 1,
      parentId: undefined,
      equipmentType: {
        id: undefined,
        parentId: null,
        name: "",
      },
      testId: 11,
      // 删除子分类
      currentDeleteType: null,
      alertViewShow: false,
      // 删除一级分类
      managementType: false,
      // 编辑分类
      modifyTypeViewShow: false,

      mixinViewOptions: {
        getURL: "/deviceCategory/getDeviceCategory",
        isPage: false,
        isShowLoading: true,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: true,
      },
    };
  },
  onLoad() {},
  methods: {
    onAddTypeShow(type) {
      this.currentType = type;
      this.equipmentType = {
        id: undefined,
        parentId: type ? type.id : "",
        name: "",
      };
      if (type && type.id) {
        this.addTypeLevel = 2;
        this.addTypeViewShow = true;
      } else {
        this.addTypeLevel = 1;
        if (this.typeList.length >= 3) {
          this.alertContent = "最多只能添加三个大分类";
          this.alertViewShow = true;
        } else {
          this.addTypeViewShow = true;
        }
      }
    },
    onAddTypeConfirm() {
      if (this.equipmentType.name !== null && this.equipmentType.name !== "") {
        const equipmentType = {
          pid: this.equipmentType.parentId || 0,
          name: this.equipmentType.name,
        };
        if (this.addTypeLevel == 2) {
          equipmentType.parentId = this.currentType.value;
        }
        uni.showLoading({
          title: "新增中",
        });
        return postEquipmentType(equipmentType)
          .then((res) => {
            uni.hideLoading();
            if (res.code !== this.$ERR_OK)
              return this.message.error(res.message || "添加分类失败");
            this.getDataList();
            uni.$emit("changeDeviceType");
          })
          .catch((err) => {
            uni.hideLoading();
          });
      } else {
        this.alertContent = "分类名称不能为空";
        this.alertViewShow = true;
      }
    },
    onModifyTypeShow(item = {}, type = {}) {
      console.log(arguments, "??argument");
      this.currentType = item;
      this.equipmentType = {
        id: item.id,
        name: item.name,
      };
      this.modifyTypeViewShow = true;
    },
    onModifyTypeConfirm() {
      if (this.equipmentType.name !== null && this.equipmentType.name !== "") {
        uni.showLoading({
          title: "修改中",
        });
        return putEquipmentType(this.equipmentType)
          .then((response) => {
            uni.hideLoading();
            this.getDataList();
            uni.$emit("changeDeviceType");
          })
          .catch((err) => {
            uni.hideLoading();
          });
      } else {
        this.alertContent = "分类名称不能为空";
        this.alertViewShow = true;
      }
    },
    onShowManage() {
      this.managementType = !this.managementType;
    },
    onShowDeleteType(type = {}) {
      this.alertContent = "确定删除分类吗？";
      this.currentDeleteType = type;
      this.alertViewShow = true;
    },
    onDeleteType() {
      if (!this.currentDeleteType || !this.currentDeleteType.id) return;
      uni.showLoading({
        title: "删除中",
      });
      return deleteEquipmentType({ id: this.currentDeleteType.id })
        .then((res) => {
          uni.hideLoading();
          this.getDataList();
          uni.$emit("changeDeviceType");
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background-color: #fff;

  position: relative;

  .bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: -130rpx;
  }
}
.main {
  position: relative;
  z-index: 2;
  padding: 0 30rpx;
  padding-bottom: 50rpx;

  .title-view {
    padding-top: 50rpx;
    padding-left: 50rpx;
    padding-bottom: 150rpx;

    .ch {
      display: block;
      font-size: 32rpx;
      color: #fff;
    }
    .en {
      display: block;
      padding-top: 10rpx;
      font-size: 24rpx;
      color: #8ea5cc;
    }
  }
  .management-view {
    display: flex;
    flex-direction: row;
    padding-bottom: 60rpx;

    .hint {
      flex: 2;
      font-size: 26rpx;
      color: #bbb;
      margin: auto;
    }
    .btn {
      flex: 1;
      margin-left: 30rpx;
      background: #5196fe;
      border-radius: 10rpx;
      overflow: hidden;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
      padding: 0 20rpx;
    }
  }

  .type-group {
    box-shadow: #ddd 0px 0px 40rpx 4rpx;
    margin-bottom: 40rpx;
    border-radius: 5rpx;

    &:last-of-type {
      margin-bottom: 50rpx !important;
    }
    .type-title-view {
      position: relative;
      z-index: 2;

      .title-bg {
        width: 100%;
      }
      .group-main {
        position: absolute;
        top: -4rpx;
        left: 0;
        width: 100%;
        height: 100%;
        // z-index: -1;
        display: flex;
        flex-direction: row;
        padding: 0 20rpx;

        .icon {
          vertical-align: middle;
        }
        .type-name {
          flex: 1;
          color: #fff;
          margin: auto;
          padding: 0 14rpx;
          font-size: 30rpx;
          font-weight: 700;

          overflow: hidden;
          word-break: break-all; /* break-all(允许在单词内换行。) */
          text-overflow: ellipsis; /* 超出部分省略号 */
          display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          -webkit-line-clamp: 1; /** 显示的行数 **/
        }
        .add-sub-type {
          margin: auto;

          .add-sub-type-icon {
            margin-right: 10rpx;
          }
          .add-sub-type-title {
            color: #fff;
            font-size: 30rpx;
          }
        }
        .delete-type {
          margin: auto;

          margin-left: 30rpx;
          .delete-icon {
            margin-right: 10rpx;
          }
          .delete-text {
            color: #fff;
            font-size: 30rpx;
          }
        }
      }
    }
    .types {
      padding: 0 20rpx;

      .type {
        border-bottom: 1rpx solid #eee;
        line-height: 90rpx;
        display: flex;
        flex-direction: row;
        font-size: 28rpx;
        &:last-child {
          border-bottom: none;
        }
        .expand-icon {
          margin-left: 20rpx;
        }
        .sub-type-name {
          flex: 1;
          padding-left: 16rpx;
          color: #505050;
        }
        .delete-icon {
          margin-left: 20rpx;
        }
        .delete-text {
          color: #3f7dff;
          padding-left: 10rpx;
          padding-right: 20rpx;
        }
      }
    }
  }
  .add-type-btn {
    background: #5196fe;
  }
}

.slot-content {
  /* padding: 30rpx; */
  display: flex;

  .add-type-input {
    width: 100%;
    // margin: 30rpx;
    border: 3rpx solid #e0e0e0;
    border-radius: 10rpx;
    padding: 0 14rpx !important;
  }
}

input {
  line-height: 80rpx;
  height: 80rpx;
}
</style>